<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>减肥大师 - 个人资料</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        .profile-header {
            background-color: #22C55E;
            color: white;
            padding: 24px 16px;
            border-radius: 0 0 24px 24px;
            position: relative;
            margin-bottom: 80px;
        }
        
        .profile-bg {
            position: absolute;
            top: -20px;
            right: -20px;
            font-size: 120px;
            opacity: 0.1;
        }
        
        .profile-user {
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        
        .profile-card {
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: -80px;
            background-color: white;
            border-radius: 16px;
            padding: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        
        .profile-stats {
            display: flex;
            justify-content: space-around;
        }
        
        .profile-stat {
            text-align: center;
        }
        
        .profile-stat-value {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .profile-stat-label {
            font-size: 12px;
            color: #6B7280;
        }
        
        .profile-list-section {
            margin-bottom: 24px;
        }
        
        .profile-section-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            padding-left: 16px;
        }
        
        .profile-list {
            background-color: white;
            border-radius: 16px;
            overflow: hidden;
        }
        
        .profile-list-item {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .profile-list-item:last-child {
            border-bottom: none;
        }
        
        .profile-list-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            font-size: 16px;
        }
        
        .icon-personal {
            background-color: #DBEAFE;
            color: #3B82F6;
        }
        
        .icon-goals {
            background-color: #DCFCE7;
            color: #22C55E;
        }
        
        .icon-reminders {
            background-color: #FEF3C7;
            color: #F59E0B;
        }
        
        .icon-privacy {
            background-color: #FEE2E2;
            color: #EF4444;
        }
        
        .icon-devices {
            background-color: #E0E7FF;
            color: #6366F1;
        }
        
        .icon-help {
            background-color: #F3E8FF;
            color: #A855F7;
        }
        
        .icon-about {
            background-color: #F5F5F5;
            color: #6B7280;
        }
        
        .icon-logout {
            background-color: #FEE2E2;
            color: #EF4444;
        }
        
        .profile-list-info {
            flex: 1;
        }
        
        .profile-list-title {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .profile-list-subtitle {
            font-size: 12px;
            color: #6B7280;
        }
        
        .profile-list-arrow {
            color: #9CA3AF;
        }
        
        .profile-badge {
            padding: 4px 8px;
            border-radius: 10px;
            font-size: 12px;
            background-color: #DCFCE7;
            color: #16A34A;
        }
        
        .achievement-section {
            margin-bottom: 24px;
        }
        
        .achievement-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            padding: 0 16px;
        }
        
        .achievement-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .achievement-more {
            font-size: 14px;
            color: #22C55E;
        }
        
        .achievement-list {
            display: flex;
            overflow-x: scroll;
            padding: 0 16px 8px;
            scrollbar-width: none; /* Firefox */
        }
        
        .achievement-list::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Edge */
        }
        
        .achievement-item {
            flex: 0 0 100px;
            margin-right: 12px;
            text-align: center;
        }
        
        .achievement-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background-color: #22C55E;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            font-size: 24px;
            color: white;
        }
        
        .achievement-icon.locked {
            background-color: #F3F4F6;
            color: #9CA3AF;
        }
        
        .achievement-name {
            font-size: 12px;
            color: #374151;
            margin-bottom: 2px;
        }
        
        .achievement-level {
            font-size: 10px;
            color: #6B7280;
        }
    </style>
</head>
<body>
    <div class="phone-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-time">14:30</div>
            <div class="status-bar-icons">
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi"></i>
                <i class="fas fa-battery-three-quarters"></i>
            </div>
        </div>
        
        <!-- 个人资料头部 -->
        <div class="profile-header">
            <div class="profile-bg">
                <i class="fas fa-circle-user"></i>
            </div>
            
            <div class="profile-user">
                <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="用户头像" class="avatar mr-4">
                <div>
                    <div class="text-xl font-semibold mb-1">陈小明</div>
                    <div class="text-sm opacity-90">会员等级 Lv.3</div>
                </div>
            </div>
            
            <!-- 用户数据卡片 -->
            <div class="profile-card">
                <div class="profile-stats">
                    <div class="profile-stat">
                        <div class="profile-stat-value">35</div>
                        <div class="profile-stat-label">累计打卡</div>
                    </div>
                    <div class="profile-stat">
                        <div class="profile-stat-value">4.3kg</div>
                        <div class="profile-stat-label">累计减重</div>
                    </div>
                    <div class="profile-stat">
                        <div class="profile-stat-value">2450</div>
                        <div class="profile-stat-label">积分</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 成就展示 -->
        <div class="achievement-section">
            <div class="achievement-header">
                <div class="achievement-title">成就</div>
                <a href="#" class="achievement-more">查看全部</a>
            </div>
            
            <div class="achievement-list">
                <div class="achievement-item">
                    <div class="achievement-icon">
                        <i class="fas fa-fire"></i>
                    </div>
                    <div class="achievement-name">连续打卡</div>
                    <div class="achievement-level">Level 2</div>
                </div>
                
                <div class="achievement-item">
                    <div class="achievement-icon">
                        <i class="fas fa-weight-scale"></i>
                    </div>
                    <div class="achievement-name">减重达人</div>
                    <div class="achievement-level">Level 1</div>
                </div>
                
                <div class="achievement-item">
                    <div class="achievement-icon">
                        <i class="fas fa-utensils"></i>
                    </div>
                    <div class="achievement-name">饮食专家</div>
                    <div class="achievement-level">Level 1</div>
                </div>
                
                <div class="achievement-item">
                    <div class="achievement-icon locked">
                        <i class="fas fa-dumbbell"></i>
                    </div>
                    <div class="achievement-name">运动达人</div>
                    <div class="achievement-level">未解锁</div>
                </div>
                
                <div class="achievement-item">
                    <div class="achievement-icon locked">
                        <i class="fas fa-trophy"></i>
                    </div>
                    <div class="achievement-name">目标达成</div>
                    <div class="achievement-level">未解锁</div>
                </div>
            </div>
        </div>
        
        <!-- 个人资料设置 -->
        <div class="profile-list-section">
            <div class="profile-section-title">账户与设置</div>
            
            <div class="profile-list">
                <div class="profile-list-item">
                    <div class="profile-list-icon icon-personal">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="profile-list-info">
                        <div class="profile-list-title">个人信息</div>
                        <div class="profile-list-subtitle">身高、体重、目标等基本信息</div>
                    </div>
                    <div class="profile-list-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="profile-list-item">
                    <div class="profile-list-icon icon-goals">
                        <i class="fas fa-bullseye"></i>
                    </div>
                    <div class="profile-list-info">
                        <div class="profile-list-title">我的目标</div>
                        <div class="profile-list-subtitle">设置减重目标和健康计划</div>
                    </div>
                    <div class="profile-list-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="profile-list-item">
                    <div class="profile-list-icon icon-reminders">
                        <i class="fas fa-bell"></i>
                    </div>
                    <div class="profile-list-info">
                        <div class="profile-list-title">提醒设置</div>
                        <div class="profile-list-subtitle">运动、饮食、喝水等提醒</div>
                    </div>
                    <div class="profile-badge">2个活跃</div>
                </div>
            </div>
        </div>
        
        <!-- 通用设置 -->
        <div class="profile-list-section">
            <div class="profile-section-title">通用设置</div>
            
            <div class="profile-list">
                <div class="profile-list-item">
                    <div class="profile-list-icon icon-privacy">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div class="profile-list-info">
                        <div class="profile-list-title">隐私设置</div>
                        <div class="profile-list-subtitle">管理您的数据和隐私选项</div>
                    </div>
                    <div class="profile-list-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="profile-list-item">
                    <div class="profile-list-icon icon-devices">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <div class="profile-list-info">
                        <div class="profile-list-title">设备管理</div>
                        <div class="profile-list-subtitle">管理已连接的设备和应用</div>
                    </div>
                    <div class="profile-list-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="profile-list-item">
                    <div class="profile-list-icon icon-help">
                        <i class="fas fa-question-circle"></i>
                    </div>
                    <div class="profile-list-info">
                        <div class="profile-list-title">帮助与反馈</div>
                        <div class="profile-list-subtitle">常见问题和意见反馈</div>
                    </div>
                    <div class="profile-list-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="profile-list-item">
                    <div class="profile-list-icon icon-about">
                        <i class="fas fa-info-circle"></i>
                    </div>
                    <div class="profile-list-info">
                        <div class="profile-list-title">关于</div>
                        <div class="profile-list-subtitle">应用版本 2.1.0</div>
                    </div>
                    <div class="profile-list-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 退出登录 -->
        <div class="profile-list-section">
            <div class="profile-list">
                <div class="profile-list-item">
                    <div class="profile-list-icon icon-logout">
                        <i class="fas fa-sign-out-alt"></i>
                    </div>
                    <div class="profile-list-info">
                        <div class="profile-list-title">退出登录</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <div class="tab-item" onclick="location.href='home.html'">
                <i class="tab-icon fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item" onclick="location.href='food-recognition.html'">
                <i class="tab-icon fas fa-camera"></i>
                <span>识别</span>
            </div>
            <div class="tab-item" onclick="location.href='diet-plan.html'">
                <i class="tab-icon fas fa-utensils"></i>
                <span>饮食</span>
            </div>
            <div class="tab-item" onclick="location.href='exercise-plan.html'">
                <i class="tab-icon fas fa-dumbbell"></i>
                <span>运动</span>
            </div>
            <div class="tab-item active">
                <i class="tab-icon fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
    
    <script>
        // 更新状态栏时间
        function updateTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.querySelector('.status-bar-time').textContent = `${hours}:${minutes}`;
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateTime();
            setInterval(updateTime, 60000);
        });
    </script>
</body>
</html> 